<template>
  <div class="popularity">
    <van-nav-bar
      title="人气榜单"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="conter">

    </div>
    <van-cell-group inset>
      <van-cell title="单元格" is-link />
      <van-grid :gutter="10">
        <van-grid-item v-for="value in 3" :key="value" icon="https://dsfs.oppo.com/omp/1634885321742-_-3fa86b83bdbd49f78a1cde51103d1824.png?_w_=320&_h_=320&x-oss-process=image/format,webp" text="文字" :style="{flex: 1}"/>
      </van-grid>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  name: 'Popularity',
  methods: {
    onClickLeft() {
      this.$router.push('/home')
    },
  },
}
</script>

<style lang="less" scoped>
  .conter{
    margin-top: 150px;
  }
  /deep/.van-cell-group{
    border: 1px solid;
    border-radius: 20px;

    .van-grid-item{
      height: 120px;
    }
  }

  /deep/.van-grid-item__icon{
    font-size: 82px;
  }
  /deep/.van-grid-item__icon+.van-grid-item__text{
    margin-top: 0;
  }
</style>
